<template>
  <div class="container">
    <van-swipe
      class="my-swipe"
      indicator-color="#EBEFFE"
      show-indicators
      :initial-swipe="initialSwipe"
    >
      <van-swipe-item>
        <div class="bannerbox">
          <div class="left">
            <div
              class="titlebord"
              v-for="(ele, index) in bannercontent.bannertitlelist"
              :key="index"
            >
              {{ ele }}
            </div>
            <div class="msg">{{ bannercontent.msg }}</div>
          </div>
          <div class="right">
            <img class="img" :src="bannercontent.banner" alt="" />
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="bannerbox">
          <div class="left">
            <div
              class="titlebord"
              v-for="(ele, index) in bannercontent1.bannertitlelist"
              :key="index"
            >
              {{ ele }}
            </div>
            <div class="msg">{{ bannercontent1.msg }}</div>
          </div>
          <div class="right">
            <img class="img" :src="bannercontent1.banner" alt="" />
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="bannerbox">
          <div class="left">
            <div
              class="titlebord"
              v-for="(ele, index) in bannercontent2.bannertitlelist"
              :key="index"
            >
              {{ ele }}
            </div>
            <div class="msg">{{ bannercontent2.msg }}</div>
          </div>
          <div class="right">
            <img class="img" :src="bannercontent2.banner" alt="" />
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="bannerbox">
          <div class="left">
            <div
              class="titlebord"
              v-for="(ele, index) in bannercontent3.bannertitlelist"
              :key="index"
            >
              {{ ele }}
            </div>
            <div class="msg">{{ bannercontent3.msg }}</div>
          </div>
          <div class="right">
            <img class="img" :src="bannercontent3.banner" alt="" />
          </div>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="bannerbox">
          <div class="left">
            <div
              class="titlebord"
              v-for="(ele, index) in bannercontent4.bannertitlelist"
              :key="index"
            >
              {{ ele }}
            </div>
            <div class="msg">{{ bannercontent4.msg }}</div>
          </div>
          <div class="right">
            <img class="img" :src="bannercontent4.banner" alt="" />
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  props:{
    initialSwipe:{
      type:Number,
      default:2
    }
  },
  data() {
    return {
      bannercontent: {
        bannertitlelist: ["人力行业一站式", "数字化管理平台"],
        msg:
          "子弹人力云平台链接5000家劳务公司、200万蓝领，日结工、外包、众包等用工方式,为人力资源行业打造一 体化的用工SaaS平台",
        banner: require("../assets/img/banner1.png"),
      },
      bannercontent1: {
        bannertitlelist: ["子弹发薪"],
        msg:
          "实现企业、劳务、蓝领工人三方的需求撮合、劳务交付、工人求职、兼职上岗、薪费结算 一体化闭环,全面为人力企业降低用工成本、提高用工效率、规避用工风险。",
        banner: require("../assets/img/banner2.png"),
      },
      bannercontent2: {
        bannertitlelist: ["子弹企微助手"],
        msg:
          "子弹人力云平台链接5000家劳务公司、200万蓝领，日结工、外包、众包等用工方式,为人力资源行业打造一体化的用工SaaS平台",
        banner: require("../assets/img/banner3.png"),
      },
      bannercontent3: {
        bannertitlelist: ["子弹工作"],
        msg: "专为蓝领员工打造的打卡领薪、私域求职平台",
        banner: require("../assets/img/banner4.png"),
      },
      bannercontent4: {
        bannertitlelist: ["人力行业雇主保障专案"],
        msg: "覆盖场景多、工种全，支持日保、周期保，跨天无忧100人投保只需1分钟，效率更高",
        banner: require("../assets/img/banner5.png"),
      },
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
.bannerbox {
  display: flex;
}
.img {
  width: 383px;
  height: auto;
}
.left {
  flex: 1;
  margin-top: 70px;
}
.titlebord {
  font-size: 36px;
  font-weight: bold;
  line-height: 46px;
}
.msg {
  font-size: 20px;
  line-height: 30px;
  color: #565868;
  margin-top: 26px;
}
</style>
